<template>
    <el-dialog @close="cancleAddDict" v-model="dialogVisible" width="30%" title="添加检测模板" destroy-on-close center>
        <template #default>
            <el-form :model="template" label-position="right" label-width="100px">


                  <el-form :model="template">
                    <el-form-item label="*模板编号">
                      <el-input v-if="!autoGenerate" v-model="template.checkTemplateId"></el-input>
                      <el-switch v-model="autoGenerate" active-text="启用自动编码" inactive-text="禁用"
                                 @change="handleSwitchChange"/>
                    </el-form-item>
                  </el-form>





                <el-form-item label="*模板名称">
                    <el-input v-model="template.checkTemplateName" placeholder="请输入检测模板名称" />
                </el-form-item>

              <el-form-item label="检测模板类型">
                <el-select
                    style="width: 100px"
                    v-model="template.checkTemplateType"
                    placeholder="选择检测模板类型"
                >
                  <el-option value="0" :selected="true" label="全部"/>
                  <el-option value="1" label="来料检验"/>
                  <el-option value="2" label="过程检验"/>
                  <el-option value="3" label="首检"/>
                  <el-option value="4" label="未检"/>
                  <el-option value="5" label="巡检"/>
                  <el-option value="6" label="自检"/>
                  <el-option value="7" label="成品检验"/>
                  <el-option value="8" label="发货检验"/>
                </el-select>
              </el-form-item>
              
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="template.note" placeholder="请输入内容" />
                </el-form-item>


            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addDict">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleAddDict">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
// 引入我们申明的template的api的js
import TemplateRequest from "@/api/checktemplate.js";
import axios from 'axios';
export default {
    props: ["visible"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加学生的操作结果
    data() {
        return {
            template: {

            },// 绑定新增的字典信息
            dialogVisible: false,// 添加字典窗口的显示与隐藏
            types:{},

          autoGenerate: false, // 开关初始状态为关闭



        }
    },


     methods: {
       getAutoNumber(rulesName, callBack) {
         let url = this.BASE_URL + "/rules/query";
         // 假设使用Axios发送GET请求
         axios.get(url, { params: "TEMPLATE_NO" })
             .then(response => {
               console.log(response.data);
               // 获取到自动生成的编码后执行回调函数
               callBack(response.data);
             })
             .catch(error => {
               // 错误处理
               console.error('Error fetching auto number:', error);
             });
       },
       handleSwitchChange(value) {
         this.autoGenerate = value;
         if (value) {
           // 开启自动生成编码时调用获取编码的方法
           this.getAutoNumber("TEMPLATE_NO", autoNumber => {
             this.template.checkTemplateId = autoNumber;
           });
         }
       },

       /**
        * 取消添加学生的事件
        */
       cancleAddDict() {
         this.template = {};
         // 通知父组件  操作完成，让父组件关闭窗体
         this.$emit("optionCompleted");
       },
       /**
        * 添加学生信息
        */
       addDict() {
         TemplateRequest.addTemplate(this.template, res => {
           if (res.code == '200') {
             this.$message({
               type: 'success',
               message: '添加成功!'
             });
             // 通知父组件  操作完成，让父组件关闭窗体
             this.$emit("optionCompleted");
           } else if (res.code == '300') {
             this.$message({
               type: 'warning',
               message: '字典' + (res.msg.indexOf("checkTemplateName") > 0 ? "名称" : "类型") + "重复"
             });
           } else {
             this.$message({
               type: 'error',
               message: '添加字典失败!'
             });
           }
         });
       },

       /**
        * 加载所有信息
        */
       loadDictAll() {
         TemplateRequest.loadTemplateAll(res => {
           const types = res.data.map(item => {
             return {
               checkTemplateType: item.checkTemplateType,
             }
           })
           let seen = {};
           let filteredArr = types.filter(item => {
             let key = item.checkTemplateType;
             if (!seen[key]) {
               seen[key] = true;
               return true;
             }
             return false;
           });
           this.types = filteredArr;
           console.log(this.types);
         })
       },

       // computed: {
       //   /**
       //    * 编码自动生成
       //    * @returns {Promise<axios.AxiosResponse<any>>|*}
       //    */
       //   get() {
       //     console.log('get method called');
       //     return this.autoGenerate ? axios.get('http://localhost:8086/md/rules/query', {
       //           params: {
       //             rulesName: 'TEMPLATE_NO'
       //           }
       //         }).then(response => {
       //           // 处理axios返回的数据
       //       console.log(url);
       //       console.log(this.template.checkTemplateId);
       //           this.template.checkTemplateId = response.data.checkTemplateId; // 假设返回的数据是编码值
       //           console.log(response.data.checkTemplateId);
       //         }).catch(error => {
       //           console.error('请求出错：', error);
       //         })
       //         : this.template.checkTemplateId;
       //   },
       //   set(value) {
       //     this.template.checkTemplateId = value;
       //   },
       // },
     },

mounted(props) {
      this.loadDictAll();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
    }
}
</script>